<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
</head>
<body>
<!--
    1/列表显示
        数组：v-for / index
        对象：v-for / key
    2/列表的更新显示
        删除item
        替换item
-->
    <div id="demo">
        <h2>测试:v-for 遍历数组</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{index}}--{{p.name}} -- {{p.age}} -- <button @click="delete_(index)">删除</button> <button @click="update_(index,{name:'Cat',age:20})">更新</button>
            </li>
        </ul>
        <h2>测试:v-for 遍历对象</h2>
        <ul>
            <li v-for="(value,key) in persons[1]" :key="key"> <!--应该保证每个列的key不一样-->
                {{value}} -- {{key}}
            </li>
        </ul>

    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*
    vue本身只是监视了persons的改变，并不会监视内部元素。
    vue重写了数组中的一些了改变数组内部数据的方法--》 数组内部改变 https://cn.vuejs.org/v2/guide/list.html 变更方法
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
    */
    const vm = new Vue({
        el:'#demo',
        data:{
            persons:[
                {name:'Tom',age:18},
                {name:'Jerry',age:20},
                {name:'Army',age:15},
                {name:'kof',age:30},
                {name:'coff',age:21},
            ]
        },
        methods:{
            delete_(index){
                /*删除index索引位置的元素*/
                this.persons.splice(index,1);/*删除操作*/
            },
            update_(index,newP){
                /*这个操作并没有改变persons本身，没有调用vue重写的变更方法，改变的是它内部的一个值，所以并不会引起页面更新*/
                // this.persons[index] = newP;
                this.persons.splice(index,1,newP); /*修改操作*/
                // this.persons.splice(index,0,newP); 增加操作

                // this.persons = [];
            }
        }
    })
</script>
</body>
</html>